<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <el-form :inline="true" :model="queryParams" class="demo-form-inline">
            <el-form-item label="司机名称">
              <el-input v-model="queryParams.driverName" placeholder="司机姓名"></el-input>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker v-model="queryParams.time" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="出行状态">
              <el-select v-model="queryParams.stutas" placeholder="选择出行状态">
                <el-option v-for="status in statusOptions" :key="status.value" :label="status.label" :value="status.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="exportExcel">导出 Excel</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="TIME" label="日期"></el-table-column>
            <el-table-column prop="expectedDepartureTime" label="预计发车时间"></el-table-column>
            <el-table-column prop="driverName" label="司机名称"></el-table-column>
            <el-table-column prop="phoneNumber" label="手机号"></el-table-column>
            <el-table-column prop="routeName" label="线路名称"></el-table-column>
            <el-table-column prop="boardingNumber" label="上车人数"></el-table-column>
            <el-table-column prop="expectedArrivalTime" label="预计到达"></el-table-column>
            <el-table-column prop="actualDepartureTime" label="实际发出时间"></el-table-column>
            <el-table-column prop="actualArrivalTime" label="实际到达时间"></el-table-column>
            <el-table-column prop="travelStatus" label="出行状态"></el-table-column>
            <el-table-column prop="isAbnormal" label="是否异常"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text">编辑</el-button>
                <el-button type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {driverList} from "@/api/driver/drver";
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
export default {
  name: "drver",
  data() {
    return {
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        carImg: '',
        pageNum: 1,
        pageSize: 10,
        ipaddr: undefined,
        userName: undefined,
        status: undefined
      },
      formInline:'',
      driverQuery: '',
      dateQuery: null,
      statusQuery: '',
      tableData: [],
      statusOptions: [
        { value: '进行中', label: '进行中' },
        { value: '已完成', label: '已完成' },
        { value: '取消', label: '取消' }
      ]
    };
  },
  created() {
    this.drverList();
  },
  methods: {
      drverList(){
          // this.axios.get("http://localhost:10014/driver/list").then(res=>{
          //     console.log(res.data)
          // })
        driverList(this.addDateRange(this.queryParams,this.dateRange)).then(res=>{
          this.tableData = res.rows;
          this.total = res.total;
          this.loading = false;
        })
      },
      // 模拟获取数据的方法
      // fetchData() {
      //   // 这里可以使用 axios 等库从后端获取数据
      //   this.tableData = [
      //     {
      //       id: 1,
      //       date: '2024-09-26',
      //       expectedDepartureTime: '08:00',
      //       driverName: '张三',
      //       phoneNumber: '1234567890',
      //       routeName: '线路 1',
      //       boardingNumber: 20,
      //       expectedArrivalTime: '09:00',
      //       actualDepartureTime: '08:10',
      //       actualArrivalTime: '09:15',
      //       travelStatus: '进行中',
      //       isAbnormal: false
      //     },
      //     // 更多数据示例
      //   ];
      // },
      exportExcel() {
        // 这里可以实现导出 Excel 的逻辑，使用插件如 xlsx 等
        console.log('导出 Excel');
      }
  },
  mounted() {
    // this.fetchData();

  }
};
</script>

<style scoped>
/* 整体卡片背景颜色 */
.el-card {
  background-color: #f9f9f9;
}

/* 表单 */
.el-form-item label {
  color: #666;
}

/* 输入框 */
.el-input {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 日期选择器 */
.el-date-picker {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 下拉选择框 */
.el-select {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 导出按钮 */
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

/* 表格 */
.el-table {
  border: 1px solid #ccc;
}

.el-table th {
  background-color: #f5f5f5;
  color: #333;
}

.el-table td {
  color: #666;
}

/* 根据出行状态进行颜色区分 */
.el-table--striped.travel-status-in-progress {
  background-color: #e6f7ff;
}

.el-table--striped.travel-status-completed {
  background-color: #e6ffe6;
}

.el-table--striped.travel-status-canceled {
  background-color: #ffe6e6;
}
</style>
